<template>
    <div class="box">
        <el-tabs v-model="activeName">
            <el-tab-pane label="汇总" name="first">
                <el-row>
                    <el-col :span="24">
                        <div class="header">
                            <el-form ref="form" :model="form" label-width="100px" class="flex-start ">
                                <el-form-item label="汇总维度">
                                    <el-select v-model="form.collectDimensionality" placeholder="请选择汇总维度"
                                        @change="handleDimensionalityChange" style="width:286px">
                                        <el-option label="月汇总" value="2"></el-option>
                                        <el-option label="日汇总" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="所属网点">
                                    <el-select v-model="form.networkNameId" placeholder="请选择所属网点" style="width:286px">
                                        <el-option v-for="item in networkList" :key="item.id" :label="item.networkName"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                
                                <el-form-item label="">
                                    <div class="flex" >
                                        <el-radio v-model="form.timeType" :label="1">结算时间</el-radio>
                                        <el-radio v-model="form.timeType" :label="2">记账时间</el-radio>

                                        <el-date-picker v-model="form.month" type="month" placeholder="选择月" v-show = 'show == 2' style="width:300px">
                                        </el-date-picker >

                                        <el-date-picker v-model="Time" value-format="yyyy-MM-dd" type="daterange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="hzdateChange" v-show = 'show == 1' style="width:300px">
                                        </el-date-picker>

                                        <!-- <el-date-picker value-format="yyyy-MM-dd" v-model="Time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="dateChange" style="width:451px">
                                        </el-date-picker> -->
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="hzsearch">查询</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                                <el-form-item label="结算类型">
                                    <el-select v-model="form.settleType" placeholder="请选择结算类型" style="width:286px">
                                        <el-option label="客户" value="客户"></el-option>
                                        <el-option label="承包区" value="承包区"></el-option>
                                        <el-option label="业务员" value="业务员"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="结算对象">
                                    <el-input v-model="form.settleObject" placeholder="请选择结算对象"
                                        style="width:286px"></el-input>
                                </el-form-item>
                                <el-form-item label="收付类型">
                                    <el-select v-model="form.nwReceiptPayType" placeholder="请选择收付类型" style="width:286px">
                                        <el-option label="应收下级" value="应收下级"></el-option>
                                        <el-option label="应付下级" value="应付下级"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="space-between">
                    <el-col :span="6">
                        <div>
                            当前页共10项
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div>
                            <el-button type="primary">新增</el-button>
                            <el-button type="primary">删除</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-table ref="multipleTable" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }" :data="tableData" tooltip-effect="dark" style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <el-table-column prop="collectDate" label="汇总日期" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="networkName.networkName" label="所属网点" width="120">
                                </el-table-column>
                                <el-table-column prop="nwReceiptPayType" label="网点收付类型" show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column prop="settleType" label="结算类型" width="120">
                                </el-table-column>
                                <el-table-column prop="settleObject" label="结算对象" width="120">
                                </el-table-column>
                                <el-table-column prop="totalTicket" label="总票数" width="120">
                                </el-table-column>
                                <el-table-column prop="rpCustomerService" label="客服类_奖罚" width="120">
                                </el-table-column>
                                <el-table-column prop="rpOperation" label="操作类_奖罚" width="120">
                                </el-table-column>
                                <el-table-column prop="rpwebmaster" label="网管类_奖罚" width="120">
                                </el-table-column>
                                <el-table-column prop="rpAgeing" label="时效类_奖罚" width="120">
                                </el-table-column>
                                <el-table-column prop="totalAmount" label="总金额" width="120">
                                </el-table-column>
                                <el-table-column prop="verifiedIncome" label="应收(已核实金额)" width="120">
                                </el-table-column>
                                <el-table-column prop="prePayTakeOutTicket" label="预付款已扣款金额" width="120">
                                </el-table-column>
                               
                                <el-table-column prop="name" label="操作" width="120">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>

                </el-row>
                <div class="block" style="display: flex; justify-content: end;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="hztotal">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="明细" name="second">
                <el-row>
                    <el-col :span="24">
                        <div class="header">
                            <el-form ref="mxForm" :model="mxForm" label-width="100px" class="flex-start ">
                                <el-form-item label="运单号">
                                    <el-input v-model="mxForm.transportCodes" placeholder="最多输入1000条"
                                        style="width:286px"></el-input>
                                </el-form-item>
                                <el-form-item label="所属网点">
                                    <el-select v-model="mxForm.networkNameId" placeholder="请选择所属网点" style="width:286px">
                                        <el-option v-for="item in networkList" :key="item.id" :label="item.networkName"
                                            :value="item.id"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="时间范围">
                                    <div class="flex">
                                        <el-radio v-model="mxForm.timeType" :label="1">出账时间</el-radio>
                                        <el-radio v-model="mxForm.timeType" :label="2">收款时间</el-radio>
                                        <el-date-picker value-format="yyyy-MM-dd" v-model="Time" type="datetimerange"
                                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                            @change="dateChange" style="width:451px">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="search">查询</el-button>
                                    <el-button>重置</el-button>
                                </el-form-item>
                                <el-form-item label="奖罚类型">
                                    <el-select v-model="mxForm.rewardType" placeholder="请选择奖罚类型" style="width:286px">
                                        <el-option label="操作类_奖惩" value="shanghai"></el-option>
                                        <el-option label="客服类_奖惩" value="beijing"></el-option>
                                        <el-option label="时效类_奖惩" value="shanghai"></el-option>
                                        <el-option label="网管类_奖惩" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="总部结算科目">
                                    <el-cascader v-model="mxForm.HqSettleSubjectList" :options="options"
                                        @change="handleChange" style="width:286px"></el-cascader>
                                    <!-- <el-select v-model="mxForm.HqSettleSubjectList" placeholder="请选择总部结算科目" style="width:286px">
                                        <el-option v-for="item in networkList" :key="item.id" :label="item.networkName"
                                            :value="item.id"></el-option>
                                    </el-select> -->
                                </el-form-item>
                                <el-form-item label="结算类型">
                                    <el-select v-model="mxForm.pullUniformObject" placeholder="请选择活动区域" style="width:286px">
                                        <el-option label="客户" value="客户"></el-option>
                                        <el-option label="承包区" value="承包区"></el-option>
                                        <el-option label="业务员" value="业务员"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="结算对象">
                                    <el-input v-model="mxForm.settleObject" placeholder="最多输入1000条"
                                        style="width:286px"></el-input>
                                </el-form-item>
                                <el-form-item label="收付类型">
                                    <el-select v-model="mxForm.hqReceiptPayType" placeholder="请选择收付类型" style="width:286px">
                                        <el-option label="应收下级" value="应收下级"></el-option>
                                        <el-option label="应付下级" value="应付下级"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="是否有效">
                                    <el-select v-model="mxForm.effectiveStatus" placeholder="请选择是否有效" style="width:286px">
                                        <el-option label="无效" value="无效"></el-option>
                                        <el-option label="有效" value="有效"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="是否核实">
                                    <el-select v-model="mxForm.isVerify" placeholder="请选择是否核实" style="width:286px">
                                        <el-option label="已核实" value="已核实"></el-option>
                                        <el-option label="未核实" value="未核实"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="是否有结算">
                                    <el-select v-model="mxForm.isNull" placeholder="请选择" style="width:286px">
                                        <el-option label="是" value="是"></el-option>
                                        <el-option label="否" value="否"></el-option>
                                    </el-select>
                                </el-form-item>


                            </el-form>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="space-between">
                    <el-col :span="6">
                        <div>
                            当前页共{{ total }}项
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div>
                            <el-button type="primary">新增</el-button>
                            <el-button type="primary">删除</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div>
                            <el-table ref="multipleTable" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }" :data="mxTableData" tooltip-effect="dark" style="width: 100%"
                                @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55">
                                </el-table-column>
                                <!-- <el-table-column prop="networkName.networkName" label="所属网点" width="120"   fixed>
                                </el-table-column> -->
                                <el-table-column prop="settleTime" label="结算时间" show-overflow-tooltip fixed>
                                </el-table-column>
                                <el-table-column prop="billTime" label="记账时间" width="120" fixed>
                                </el-table-column>
                                <el-table-column prop="transportCode" label="运单号" width="120">
                                </el-table-column>
                                <el-table-column prop="rewardType" label="奖罚类别" width="120">
                                </el-table-column>
                                <el-table-column prop="hqReceiptPayType" label="总部收付类型" width="120">
                                </el-table-column>
                                <el-table-column prop="hqSettleSubject.hqSettleSubject" label="总部结算科目" width="120">
                                </el-table-column>
                                <el-table-column prop="hqSettleMoney" label="总部结算金额" width="120">
                                </el-table-column>
                                <el-table-column prop="pickupSalesman" label="揽件业务员" width="120">
                                </el-table-column>
                                <el-table-column prop="deliverySalesman" label="派件业务员" width="120">
                                </el-table-column>
                                <el-table-column prop="summary" label="摘要" width="120">
                                </el-table-column>
                                <el-table-column prop="entryExitSign" label="进出港标志" width="120">
                                </el-table-column>
                                <el-table-column prop="nwReceiptPayType" label="网点收付类型" width="120">
                                </el-table-column>
                                <el-table-column prop="settleType" label="结算类型" width="120">
                                </el-table-column>
                                <el-table-column prop="settleObject" label="结算对象" width="120">
                                </el-table-column>
                                <el-table-column prop="clientSource.clientSource" label="客户来源" width="120">
                                </el-table-column>
                                <el-table-column prop="settleMoney" label="结算金额" width="120">
                                </el-table-column>
                                <el-table-column prop="prePayTakeOutMoney" label="预付款已扣金额" width="120">
                                </el-table-column>
                                <el-table-column prop="isVerify" label="是否核实" width="120">
                                </el-table-column>
                                <el-table-column prop="effectiveStatus" label="有效状态" width="120">
                                </el-table-column>
                                <el-table-column prop="createBy" label="创建人" width="120">
                                </el-table-column>
                                <el-table-column prop="createTime" label="创建时间" width="120">
                                </el-table-column>
                                <el-table-column prop="remark" label="备注" width="120">
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>

                </el-row>
                <div class="block" style="display: flex; justify-content: end;">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import { getOutletsList, getRewardApportionList, getHqSettleSubjectList, rewardApportionSearch, collectSearch } from "@/api/dashboard";

export default {
    data() {
        return {
            activeName: "first",
            form: {
                networkNameId: '',
                collectDimensionality: '1',
                timeType: 1,
                startTime: '',
                endTime: '',
                month: '',
                settleType: '',
                settleObject: '',
                nwReceiptPayType: '',
            },
            // 明细
            mxForm: {
                // 运单号
                transportCodes: '',
                // 网点
                networkNameId: '',
                // 时间范围 1：出账时间 2：收款时间
                timeType: 1,
                // 奖罚类型
                rewardType: '',
                // 总部科目结算id
                hqSettleSubjectId: '',
                // 结算类型
                settleType: '',
                //结算对象
                settleObject: '',
                // 收付类型
                hqReceiptPayType: '',
                // 是否有效
                effectiveStatus: '',
                // 是否核实
                isVerify: '',
                // 是否有结算
                isNull: '',

                // 开始时间
                startTime: '',
                // 结束时间
                endTime: ''

            },
            // 日期
            Time: '',
            //网点列表
            networkList: [],
            pages: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            hztotal: 0,
            hzpages: {
                pageNum: 1,
                pageSize: 10,
            },
            currentPage: 1,

            currentPage4: 1,
            tableData: [],
            mxTableData: [],
            // 明细-总部结算科目
            HqSettleSubjectList: [],
            options: [],
            show: 1

        };
    },
    created() {
        this.getTabList()
        this.getOutLet()
        this.hzsearch()

    },
    mounted() {
        this.getMxZBJS()
    },
    watch: {
        value(newValue) {
            // 监听 value 的变化，你可以根据需要进行相应的操作
            console.log("New Value:", newValue);
        }
    },
    methods: {
        // 获取网点列表
        getOutLet() {
            getOutletsList().then((res) => {
                if (res.code == 200) {
                    this.networkList = res.data
                }

            })
        },
        // 显示明细总部结算科目
        getMxZBJS() {
            getHqSettleSubjectList().then((res) => {
                if (res.code == 200) {
                    this.HqSettleSubjectList = res.data
                    // 在组件挂载时设置 options 数组
                    this.options = this.parseOptions(this.HqSettleSubjectList);
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }
            })
        },
        // 替换数据
        parseOptions(data) {
            // 将原始数据结构转换为级联选择器需要的结构
            return data.map(item => {
                const newItem = {
                    value: item.id,
                    label: item.hqSettleSubject
                };

                if (item.hqSettleSubjectList && item.hqSettleSubjectList.length > 0) {
                    newItem.children = this.parseOptions(item.hqSettleSubjectList);
                }

                return newItem;
            });
        },
        // 显示明细表格数据
        hzsearch() {
            for (const key in this.form) {
                // Check if the value is empty (assuming empty means falsy in this context)
                if (!this.form[key]) {
                    // If the value is empty, delete the key from mxForm
                    delete this.form[key];
                }
            }
            collectSearch(this.form).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data
                    this.hztotal = res.data.total
                    this.hzpages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
        },
        // 显示明细表格数据
        getTabList() {
            getRewardApportionList().then((res) => {
                if (res.code == 200) {
                    this.mxTableData = res.data.data
                    this.total = res.data.total
                    this.pages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
        },

        // 根据月.日切换时间选择
        handleDimensionalityChange(newVal) {
            console.log(newVal)
            if (newVal == 1) {
                this.show = 1
            } else {
                this.show = 2
            }
        },

        // 总部结算科目
        handleChange(value) {
            console.log(value);
            this.mxForm.hqSettleSubjectId = value[2]
        },
        // 日期转换
        dateChange(value) {
            this.mxForm.startTime = value[0]
            this.mxForm.endTime = value[1]

        },
        // 汇总日期转换
        hzdateChange(value) {
            this.form.startTime = value[0]
            this.form.endTime = value[1]
        },
        // 查询
        search() {
            for (const key in this.mxForm) {
                // Check if the value is empty (assuming empty means falsy in this context)
                if (!this.mxForm[key]) {
                    // If the value is empty, delete the key from mxForm
                    delete this.mxForm[key];
                }
            }
            rewardApportionSearch(this.mxForm).then((res) => {
                if (res.code == 200) {
                    this.mxTableData = res.data.data
                    this.total = res.data.total
                    this.pages = res.data.pages
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'warning'
                    });
                }

            })
        },
        // 重置
        clear() {
            this.form = {}
        },
        handleSizeChange(val) {
            this.pages.pageSize = val
            this.getTabList()

            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.pages.pageNum = val
            this.getTabList()
            console.log(`当前页: ${val}`);
        },
        handleSelectionChange(val) {
            // this.multipleSelection = val;
        }

    },

}
</script>

<style lang="scss" scoped>
.box {
    padding: 20px;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.header {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>